<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算</title>
    <script type="text/javascript" src="vue.js"></script>
</head>
<body>
    <div id="root">
        商品：<input type="text" v-model="goods"> <br/><br/>
        数量：<input type="text" v-model="num"> <br/><br/>
        价格：<input type="text" v-model="price"> <br/><br/>
        <button @click="addinfo">添加到购物车</button><br/>
        <ul>
            <li v-for="c in car">{{c.goods}}的数量是{{c.num}},单价是{{c.price}},小计:{{c.total}}</li>
            <li>总计:总数----{{totalCount}} 总价----{{totPrice}}</li>
        </ul>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

    const vm = new Vue({
        el:'#root',
        data:{
            goods:'',
            num:'',
            price:'',
            car:[
                {goods:'牙刷',num:'5',price:'10',total:'50'},
                {goods:'牙膏',num:'2',price:'20',total:'40'},
                {goods:'镜子',num:'3',price:'30',total:'90'}
            ]
        },
        methods: {
            addinfo(){
                const carObj={goods:this.goods,num:this.num,price:this.price,total:this.num*this.price}
                this.car.push(carObj)
                this.goods=''
                this.num=''
                this.price=''
            }
        },
        computed:{
            totalCount(){
                let totalCount=0;
                for (let i = 0; i < this.car.length; i++) {
                    totalCount += Number(this.car[i].num);
                }
                return totalCount
            },
            totPrice(){
                let totalPrice=0;
                for (let i = 0; i < this.car.length; i++) {
                    totalPrice += Number(this.car[i].total);
                }
                return totalPrice
            }
        }
    })
</script>
</html>